<template>
	<el-dialog v-model="isVisible" title="酒藏明细" width="800px" :before-close="handleClose">
		<el-table :data="tableData">
			<el-table-column label="酒藏ID" prop="certificateId" minWidth="100" align="center"> </el-table-column>
			<el-table-column label="酒藏链码" prop="certificateCode" minWidth="200" align="center"> </el-table-column>
			<el-table-column label="发行时间" prop="publishTime" minWidth="180" align="center"> </el-table-column>
		</el-table>
	</el-dialog>
</template>

<script setup lang="tsx">
import { ref, watch } from 'vue';

const props = defineProps({
	// 列表内容
	visible: {
		type: Boolean,
		default: () => false,
	},
	row: {
		type: Object,
		default: () => null,
	},
});

const emit = defineEmits(['handleClose']);

const isVisible = ref(false);

const tableData = ref<any>([]);

watch(
	() => props.visible,
	(val) => {
		isVisible.value = val;
	},
	{
		immediate: true,
	}
);

const handleClose = () => {
	emit('handleClose');
};

watch(
	() => props.row,
	() => {
		tableData.value = props.row?.certificateList;
	},
	{
		immediate: true,
		deep: true,
	}
);
</script>

<style lang="scss">
.good-service-form {
	.el-form-item {
		width: 90%;
		.el-input-number {
			width: 100%;
		}
	}
}
</style>
